<!DOCTYPE html>
<html lang="cn">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title><%- data.title %></title>
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <link rel="stylesheet" href="css/bootstrap.min.3.7.css">;
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/index.css" class="">
   <script src="js/bootstrap.min.js"></script>
   <!-- <script src="http://120.79.139.240:300/socket.io/socket.io.js"></script> -->
   <!-- <script src="http://127.0.0.1:300/socket.io/socket.io.js"></script> -->
   <script src="/ws/socket.io.js"></script>
   <script src="js/flexible.js"></script>
</head>

<body>
   <!-- 模板渲染 <%-  %> 需要在里面加-横杆  并且与后面变量空格一个至少 -->
   <div class="container wrapper bg-primary" id='container'>
      <h3>websocket 聊天系统:用户<%- data.userNB %></h3>
      <div class="container-fluid content-main  bg-danger">
         <div class="left col-lg-8 col-md-8 col-xs-8 bg-primary">
            <ul class="top ">
               <li class="server  "><label class="bg-info"><span class="glyphicon glyphicon-cloud"> </span> 你好</label>
               </li>
               <!-- <li class="clinet "><label class="bg-success "><span class="glyphicon glyphicon-user"> </span> 几乎是会计师</label></li> -->
            </ul>
            <section class="bottom bg-success">
               <div type="text" class="send bg-success">
                  <textarea name="send" id="send" cols="300" rows="100"></textarea>
               </div>
               <p class="bg-info">按回车"Enter"键或单击按钮发送，Ctrl+Enter 换行 <button onclick="send()"
                     class="btn btn-success">发送</button></p>
            </section>
         </div>

         <div class="right col-lg-4 col-md-4 col-xs-4 bg-danger">
            <p class="bg-info"><img id="userIMG"
                  src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2111934553,104502141&fm=26&gp=0.jpg"
                  alt=""></p>
            <p class="bg-info"> <span class="glyphicon glyphicon-user">用户:</span><span>jekig</span></p>
            <p class="bg-info"><span class="glyphicon glyphicon-phone">号码:</span><span>531556397</span></p>
         </div>

      </div>
      <audio id="audio" autoplay="auto" src="http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9478.wav"></audio>

   </div>


   <script>
      //   动态设置用户头像宽度
      var imgW = $("#userIMG").innerWidth();
      //   alert(imgW)
      $("#userIMG").css({ "height": imgW + "px" })
      const options = {
         path: "/ws"
      };
      let token = 'ABCDEF123456';
      //连接ws服务器
      // const socket = io("http://120.79.139.240:300");
      const socket = io("http://127.0.0.1:300/?"+token,options);


      const audio = document.getElementById('audio')
      //设置监听来自于服务器推送的事件
      var adminID = 0;
      socket.on("pusll-message-event", (data) => {
         console.log('接受到的数据：', data);
         if (data.adminID != 0 && data.adminID != "") {
            adminID = data.adminID
         }
         var getdata = data.data.msg
         var getMsgStr = " <li class='server'><label class='bg-info'><span class='glyphicon glyphicon-cloud'> </span>" + getdata + "</label></li>"
         $(".top").append(getMsgStr);
         $("#audio").attr("src", "http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9478.wav");
         audio.play()
      })


      //监听轮询轮询在线消息 
      socket.on('server-ask-client', (data) => {
         console.log('收到轮询是否在线消息:', data)
         if (data.adminID && data.adminID != 0 && data.adminID != "") {
            adminID = data.adminID
         }
         var getdata = data.data.ask
         var getMsgStr = " <li class='server'><label class='bg-info'><span class='glyphicon glyphicon-cloud'> </span>" + getdata + "</label></li>"
         $(".top").append(getMsgStr);
         $("#audio").attr("src", "http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9478.wav");
         audio.play()
         socket.emit("client-keep-live", { res: 'ImLive' })
      })




      //send发送消息的方法
      var txt = document.getElementById("send");
      function send() {
         $("#audio").attr("src", "http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9411.wav")
         audio.play()
         //触发一个服务器端绑定的事件(自定义事件)（功能就是用于推送发送过去的数据给到其他用户）
         var text = txt.value;
         socket.emit("send-message-event", { msg: text, adminID: adminID });
         var senMsgStr = "<li class='clinet' ><label class='bg-success'><span class='glyphicon glyphicon-user'> </span>" + text + "</label></li>"
         $(".top").append(senMsgStr);
         $("#send").val("")
      }


      // tui退出事件
      socket.on('disconnect', (res) => {
         console.log('退出事件')
         socket.emit('disconnect', { msg: "退出" })
      })


 

//       var array=["sas",23232,"efeaw","sdfafg4",22,44,55,66,77]
//  // 按fliter 设置三个参数value、index、 arr;可以依次 按array长度为次数返回array 里面的依次 每个数据 、每个数据的索引、 每次返回全部数组、 
//  //设置新数组容器接收即可得到新剔除后的数据
//           var newArr=[]
//           newArr.push( array.filter(function(arr){
//                 if(arr!=66){
//                     return arr
//                 }
//               })
//               );
//               console.log(newArr)
         
      







   </script>

</body>
</html>